<template>
  <div class="market-analysis h-screen bg-gray-100 p-6">
    <header class="mb-6">
      <h1 class="text-3xl font-bold text-gray-800">市场分析</h1>
      <p class="text-gray-600">全面掌握市场动态，洞察投资机会</p>
    </header>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 左侧 - 市场概览 -->
      <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
          <MarketOverview />
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- 市场热点 -->
          <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-800">市场热点</h2>
            <div class="space-y-4">
              <div v-for="(hotspot, index) in marketHotspots" :key="index" class="flex items-center">
                <div class="w-10 h-10 rounded-full flex items-center justify-center mr-4"
                     :class="hotspot.trend === 'up' ? 'bg-red-100' : 'bg-green-100'">
                  <span :class="hotspot.trend === 'up' ? 'text-red-600' : 'text-green-600'">
                    {{ index + 1 }}
                  </span>
                </div>
                <div>
                  <h3 class="font-medium">{{ hotspot.name }}</h3>
                  <p class="text-sm text-gray-500">{{ hotspot.description }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 市场情绪 -->
          <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-800">市场情绪指标</h2>
            <div class="space-y-4">
              <div v-for="(sentiment, index) in marketSentiments" :key="index" class="mb-4">
                <div class="flex justify-between mb-1">
                  <span class="text-sm font-medium text-gray-700">{{ sentiment.name }}</span>
                  <span class="text-sm font-medium"
                        :class="getSentimentColor(sentiment.value)">
                    {{ sentiment.value }}
                  </span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="h-2 rounded-full" 
                       :style="`width: ${sentiment.percentage}%`"
                       :class="getSentimentBgColor(sentiment.value)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧 - 市场新闻 -->
      <div class="h-full">
        <div class="bg-white rounded-xl shadow-md p-6 h-full">
          <MarketNews />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import MarketOverview from '../components/MarketOverview.vue';
import MarketNews from '../components/market/MarketNews.vue';

// 市场热点数据
const marketHotspots = ref([
  { name: '新能源汽车', description: '政策利好，销量持续增长', trend: 'up' },
  { name: '半导体芯片', description: '国产替代进程加速', trend: 'up' },
  { name: '医药生物', description: '创新药研发取得突破', trend: 'up' },
  { name: '房地产', description: '行业调控政策持续', trend: 'down' }
]);

// 市场情绪指标
const marketSentiments = ref([
  { name: '恐慌/贪婪指数', value: '适度贪婪', percentage: 65 },
  { name: '多空比例', value: '多头占优', percentage: 70 },
  { name: '成交量', value: '活跃', percentage: 85 },
  { name: '波动性', value: '中等', percentage: 50 }
]);

// 获取情绪颜色
const getSentimentColor = (value) => {
  const sentimentMap = {
    '极度恐慌': 'text-red-700',
    '恐慌': 'text-red-600',
    '适度恐慌': 'text-orange-600',
    '中性': 'text-gray-600',
    '适度贪婪': 'text-green-600',
    '贪婪': 'text-green-700',
    '极度贪婪': 'text-green-800',
    '空头占优': 'text-red-600',
    '多空平衡': 'text-gray-600',
    '多头占优': 'text-green-600',
    '低迷': 'text-red-600',
    '一般': 'text-gray-600',
    '活跃': 'text-green-600',
    '高': 'text-red-600',
    '中等': 'text-yellow-600',
    '低': 'text-green-600'
  };
  
  return sentimentMap[value] || 'text-gray-600';
};

// 获取情绪背景颜色
const getSentimentBgColor = (value) => {
  const bgMap = {
    '极度恐慌': 'bg-red-700',
    '恐慌': 'bg-red-600',
    '适度恐慌': 'bg-orange-600',
    '中性': 'bg-gray-600',
    '适度贪婪': 'bg-green-600',
    '贪婪': 'bg-green-700',
    '极度贪婪': 'bg-green-800',
    '空头占优': 'bg-red-600',
    '多空平衡': 'bg-gray-600',
    '多头占优': 'bg-green-600',
    '低迷': 'bg-red-600',
    '一般': 'bg-gray-600',
    '活跃': 'bg-green-600',
    '高': 'bg-red-600',
    '中等': 'bg-yellow-600',
    '低': 'bg-green-600'
  };
  
  return bgMap[value] || 'bg-gray-600';
};
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>